<template>
	<view class="container">
		<view class="line"></view>
		<view class="deivce">
			<image class="device-img" :src="devicePic" mode="aspectFit"></image>
			<view class="device-name">{{ noteName }}</view>
		</view>
		<view class="list-wrapper">
			<view class="title">绑定星梦云康</view>
			<scroll-view class="list-scroll" scroll-y>
				<view class="list" v-if="deviceList.length > 0">
					<view class="list-item" v-for=" (item, index) in deviceList" :key="index">
						<image class="img" :src="$IMAGE_BASE_URL + '/static/ic_light.png'" mode="heightFix" />
						<view class="name">星梦云康设备</view>
						<view class="btn" @click="bindLightDevice(item)">选择</view>
					</view>
				</view>
				<view v-else>
					<view class="list-null">
						<image class="null-img" :src="$IMAGE_BASE_URL + '/static/empty-02.png'" mode="heightFix">
						</image>
						<view class="null-text">暂无星梦云康设备</view>
						<BaseButton shape="circle" text="请先绑定星梦云康" @click="toBindLight" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import BaseButton from "@/components/base-button/index.vue";
	import {
		device
	} from "@/api/login/index.js";
	import {
		getBindDevice
	} from "@/api/device";
	import StorageUtils from "@/utils/StorageUtils";
	import CacheConfig from "@/config/CacheConfig";

	export default {
		data() {
			return {
				devicePic: "",
				noteName: "",
				deviceList: [],
			};
		},
		components: {
			BaseButton
		},
		onShow() {
			const {
				devicePic,
				noteName,
			} = this.$addDeviceService.subDevice;
			this.devicePic = devicePic;
			this.noteName = noteName;
			const uuid = this.$addDeviceService.uuid;
			getBindDevice({
				uuid
			}).then(res => {
				console.log("getBindDevice success", res);
				const list = res.obj;
				const deviceList = [];
				list.forEach(v => {
					if (v.deviceType === 'LIGHT') {
						deviceList.push(v);
					}
				})
				this.deviceList = deviceList;
			}).catch(err => {
				console.log("getBindDevice error", err);
			})
		},
		methods: {
			toBindLight() {
				this.$addDeviceService.scanCodeLight();
			},
			bindLightDevice(item) {
				console.log("bindLightDevice", item);
				const {
					deviceType,
					deviceName,
					productKey
				} = item;
				this.$addDeviceService.selectLight(deviceType, deviceName, productKey);
				uni.navigateTo({
					url: '/pages/addDevice/bindLamp'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// height: 100vh;
		background-color: #FFFFFF;

		.line {
			height: 20rpx;
			background-color: #F5F5F6;
		}

		.deivce {
			border-bottom: 1rpx solid #BBBBBB;
			display: flex;
			align-items: center;
			padding: 35rpx 0;

			.device-img {
				width: 100rpx;
				height: 100rpx;
				margin-left: 50rpx;
			}

			.device-name {
				font-size: 30rpx;
				font-weight: 400;
				color: #010101;
				margin-left: 30rpx;
			}
		}

		.list-wrapper {

			.title {
				font-size: 30rpx;
				font-weight: 400;
				color: #010101;
				padding: 20rpx 30rpx;
			}

			.list-scroll {
				height: calc(100vh - 20rpx - 150rpx - 30rpx - 50rpx);
				// background-color: orange;

				.list {
					display: flex;
					flex-direction: column;
					align-items: center;

					.list-item {
						display: flex;
						align-items: center;
						border: 1rpx solid #BBBBBB;
						border-radius: 20rpx;
						width: 680rpx;
						padding: 35rpx;
						box-sizing: border-box;
						margin-bottom: 20rpx;

						.img {
							width: 70rpx;
							height: 80rpx;
						}

						.name {
							flex: 1;
							font-size: 30rpx;
							font-weight: 400;
							color: #010101;
							margin-left: 20rpx;
						}

						.btn {
							font-size: 30rpx;
							font-weight: 400;
							color: #2B8AFF;
							padding: 20rpx
						}

					}
				}
			}

			.list-null {
				display: flex;
				flex-direction: column;
				align-items: center;

				.null-img {
					height: 300rpx;
					margin-bottom: 20rpx;
				}

				.null-text {
					font-size: 30rpx;
					font-weight: 400;
					color: #a6a6a6;
					margin-bottom: 50rpx;
				}

				.null-btn {
					width: 500rpx;
				}
			}
		}
	}
</style>